<template>
  <div>
    <con-title :topTitle="topTitle" />
    <device-view class="gailan-l"></device-view>
    <!-- 基地开始 -->
    <div class="jidi" v-for="(item, index) in sensorList" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title-bold">{{ index }}</span>
        </div>
        <div class="jidi-item">
          <div v-for="(i, k) in item" :key="i + '-' + k">
            <div>
              <span
                v-if="i.online"
                :style="{
                  color: '#3dd93d',
                }"
                class="iconfont icon-yalichuanganqi"
              ></span>
              <span
                v-else
                :style="{
                  color: '#808080',
                }"
                class="iconfont icon-yalichuanganqi"
              ></span>
              <span class="title-bold devValue">{{ i.devValue }}</span>
              <span class="title-bold">{{ i.devName }}</span>
            </div>
            <p>EUI: {{ i.eui }}</p>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 基地结束 -->
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import DeviceView from "./components/Device.vue";
// 引入基地数据api
import { $sensorList } from "@/api/index.js";

export default {
  name: "dataView",
  data() {
    return {
      topTitle: {
        type: "", //type如果有内容就会显示上一级
        text: "设备列表",
        msg: "监控所有设备状态",
      },
      sensorList: {},
    };
  },
  mounted() {
    // 获取基地模块数据
    $sensorList().then((res) => {
      this.sensorList = res.data.data;
    });
  },
  components: {
    DeviceView,
    ConTitle,
  },
};
</script>

<style lang="scss" scoped>
.gailan-l {
  width: 98.9%;
  display: flex;
  margin: 10px;
}
.jidi {
  width: 98.9%;
  margin: 10px;
  .box-card {
    .jidi-item {
      display: flex;
      flex-flow: wrap;
    }
    .title-bold {
      font-weight: bold;
    }
  }
}

.jidi-item > div {
  width: 13.5%;
  height: 220px;
  margin-bottom: 10px;
  border: 1px solid #e6e9ed;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
}

.jidi-item > div > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .devValue {
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .icon-yalichuanganqi {
    font-size: 55px;
    transform: rotate(180deg);
    margin-top: 10px;
  }
}

.jidi-item > div > p {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background: #f3f4f5;
}
</style>
